<!-- ERC-物资看板页面 -->
<template>
  <div class="allBody">
    <div class="equip-wrap-common" style="flex-wrap: wrap; height: 150px; margin-bottom: 16px">
      <BenchCompWrapper title="物资总览">
        <template v-slot:content>
          <div class="banner">
            <div class="inLeft">
              <img :src="inLeft" alt="今日入库" />
              <div class="title">
                <p class="banner-text">今日入库</p>
                <p class="banner-button">
                  <span @click="linkToIn('day')" class="fontSize">{{ OverviewData.todayInCount }}</span>
                </p>
                <p>
                  <span class="banner-test">环比昨日</span>
                  <span v-if="OverviewData.todayInRate > 0" class="banner-icon" style="color: #10b981"
                    >+{{ OverviewData.todayInRate }}%
                    <px-icon><Top /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.todayInRate < 0" class="banner-icon" style="color: #ef4444"
                    >{{ OverviewData.todayInRate }}%
                    <px-icon><Bottom /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.todayInRate === 0" class="banner-icon">{{ OverviewData.todayInRate }}% </span>
                </p>
              </div>
            </div>
            <div class="outLeft">
              <img :src="outLeft" alt="今日出库" />
              <div class="title">
                <p class="banner-text">今日出库</p>
                <p class="banner-button">
                  <span @click="linkToOut('day')" class="fontSize">{{ OverviewData.todayOutCount }}</span>
                </p>
                <p>
                  <span class="banner-test">环比昨日</span>
                  <span v-if="OverviewData.todayOutRate > 0" class="banner-icon" style="color: #10b981"
                    >+{{ OverviewData.todayOutRate }}%
                    <px-icon><Top /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.todayOutRate < 0" class="banner-icon" style="color: #ef4444"
                    >{{ OverviewData.todayOutRate }}%
                    <px-icon><Bottom /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.todayOutRate === 0" class="banner-icon">{{ OverviewData.todayOutRate }}% </span>
                </p>
              </div>
            </div>
            <div class="inRight">
              <img :src="inRight" alt="本月入库" />
              <div class="title">
                <p class="banner-text">本月入库</p>
                <p class="banner-button">
                  <span @click="linkToIn('month')" class="fontSize">{{ OverviewData.monthInCount }}</span>
                </p>
                <p>
                  <span class="banner-test">环比上月</span>
                  <span v-if="OverviewData.monthInRate > 0" class="banner-icon" style="color: #10b981"
                    >+{{ OverviewData.monthInRate }}%
                    <px-icon><Top /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.monthInRate < 0" class="banner-icon" style="color: #ef4444"
                    >{{ OverviewData.monthInRate }}%
                    <px-icon><Bottom /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.monthInRate === 0" class="banner-icon">{{ OverviewData.monthInRate }}% </span>
                </p>
              </div>
            </div>
            <div class="outRight">
              <img :src="outRight" alt="本月出库" />
              <div class="title">
                <p class="banner-text">本月出库</p>
                <p class="banner-button">
                  <span @click="linkToOut('month')" class="fontSize">{{ OverviewData.monthOutCount }}</span>
                </p>
                <p>
                  <span class="banner-test">环比上月</span>
                  <span v-if="OverviewData.monthOutRate > 0" class="banner-icon" style="color: #10b981"
                    >+{{ OverviewData.monthOutRate }}%
                    <px-icon><Top /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.monthOutRate < 0" class="banner-icon" style="color: #ef4444"
                    >{{ OverviewData.monthOutRate }}%
                    <px-icon><Bottom /></px-icon>
                  </span>
                  <span v-else-if="OverviewData.monthOutRate === 0" class="banner-icon">{{ OverviewData.monthOutRate }}% </span>
                </p>
              </div>
            </div>
            <div class="num">
              <img :src="num" alt="物资总数" />
              <div class="title">
                <p class="banner-text">物资总数</p>
                <p class="banner-button">
                  <span @click="linkToLedger('count')" class="fontSize">{{ OverviewData.totalCount }}</span>
                </p>
              </div>
            </div>
            <div class="alarmNum">
              <img :src="alarmNum" alt="库存预警数" />
              <div class="title">
                <p class="banner-text">库存预警数</p>
                <p class="banner-button">
                  <span @click="linkToLedger('alarm')" class="fontSize">{{ OverviewData.stockWarningCount }}</span>
                </p>
              </div>
            </div>
          </div>
        </template>
      </BenchCompWrapper>
    </div>
    <div class="equip-wrap-common serchBox" style="height: 64px; margin-bottom: 16px">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="24">
          <px-col :span="5">
            <px-form-item label="物资类型">
              <px-tree-select
                v-model="queryParams.typeCode"
                filterable
                clearable
                placeholder="请选择物资类型"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'path'
                }"
                check-strictly
                :data="filteredTreeData"
                :render-after-expand="false"
              />
              <!-- @focus="queryTypeCodeList" -->
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="物资名称">
              <px-input
                v-model="queryParams.name"
                placeholder="请输入物资名称"
                maxlength="50"
                @blur="queryParams.value = $event.target.value.trim()"
                @keyup.enter="getChartData"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="getChartData">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="规格类型">
              <px-input
                v-model="queryParams.specification"
                placeholder="请输入规格类型"
                maxlength="50"
                @blur="queryParams.value = $event.target.value.trim()"
                @keyup.enter="getChartData"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="getChartData">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="日期" prop="inDate">
              <px-date-picker
                v-model="queryParams.inDate"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate"
              />
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="getChartData">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
    </div>
    <div>
      <px-row>
        <!-- 入库时间分析 -->
        <px-col :span="12">
          <px-card style="margin-right: 8px">
            <BenchCompWrapper title="入库时间分析">
              <template v-slot:btn>
                <px-tooltip content="跳转入库管理" placement="top"
                  ><px-button class="button" text type="primary" @click="linkToIn('in')"
                    ><px-icon><ArrowRightBold /></px-icon></px-button
                ></px-tooltip>
              </template>
              <template v-slot:content>
                <PieCharts ref="pieRef" :chartsData="chartsData" />
              </template>
            </BenchCompWrapper> </px-card
        ></px-col>
        <!-- 库存健康分析 -->
        <px-col :span="12">
          <px-card style="margin-left: 8px">
            <BenchCompWrapper title="库存健康分析">
              <template v-slot:btn>
                <px-tooltip content="跳转物资台账" placement="top"
                  ><px-button class="button" text type="primary" @click="linkToLedger('charts')"
                    ><px-icon><ArrowRightBold /></px-icon></px-button
                ></px-tooltip>
              </template>
              <template v-slot:content>
                <div class="card-right">
                  <div class="card-right-item">
                    <div style="width: 64px; height: 64px; margin-bottom: 24px; display: inline-block"><img :src="left" alt="物资总数" /></div>
                    <div style="font-size: 18px">半年内需采购物资数</div>
                    <div style="font-size: 32px">
                      <span class="card-right-item-span" @click="linkToIn(6)">{{ inOutTypeCountData.sixMonthCount }}</span>
                    </div>
                  </div>
                  <div class="card-right-item">
                    <div style="width: 64px; height: 64px; margin-bottom: 24px; display: inline-block"><img :src="right" alt="物资总数" /></div>
                    <div style="font-size: 18px">2个月内需采购物资数</div>
                    <div style="font-size: 32px">
                      <span class="card-right-item-span" @click="linkToIn(2)">{{ inOutTypeCountData.twoMonthCount }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </BenchCompWrapper>
          </px-card></px-col
        >
      </px-row>
      <px-row>
        <!-- 出入库数量趋势 -->
        <px-col :span="12">
          <px-card style="margin-right: 8px; margin-top: 16px">
            <BenchCompWrapper title="出入库数量趋势">
              <template v-slot:btn>
                <px-tooltip v-if="type !== 'YEAR'" content="返回上一级" placement="top">
                  <px-button class="button" text type="primary" @click="linkGoLeft">
                    <px-icon><ArrowLeftBold /></px-icon>
                  </px-button>
                </px-tooltip>
                <px-tooltip content="跳转物资台账" placement="top"
                  ><px-button class="button" text type="primary" @click="linkToLedger('charts')"
                    ><px-icon><ArrowRightBold /></px-icon></px-button
                ></px-tooltip>
              </template>
              <template v-slot:content>
                <div class="leftCard" v-if="leftBarList.value?.length !== 0">
                  <leftBarCharts ref="leftBarRef" :leftBarData="leftBarData" :leftBarList="leftBarList" @drillLeft="handleDrillLeft" />
                </div>
                <px-empty v-else style="height: 300px" :image-size="100" description="暂时没有数据" />
              </template>
            </BenchCompWrapper> </px-card
        ></px-col>
        <!-- 出入库种类分析 -->
        <px-col :span="12">
          <px-card style="margin-left: 8px; margin-top: 16px">
            <BenchCompWrapper title="出入库种类分析">
              <template v-slot:btn>
                <px-tooltip v-if="typeCode !== '0'" content="返回上一级" placement="top">
                  <px-button class="button" text type="primary" @click="linkGoRight">
                    <px-icon><ArrowLeftBold /></px-icon>
                  </px-button>
                </px-tooltip>
                <px-tooltip content="跳转物资台账" placement="top"
                  ><px-button class="button" text type="primary" @click="linkToLedger('charts')"
                    ><px-icon><ArrowRightBold /></px-icon></px-button
                ></px-tooltip>
              </template>
              <template v-slot:content>
                <rightBarCharts ref="rightBarRef" :rightBarData="rightBarData" :rightBarList="rightBarList" @drillRight="handleDrillRight" />
              </template>
            </BenchCompWrapper> </px-card
        ></px-col>
      </px-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs, computed, watch, ref } from "vue";
import BenchCompWrapper from "./components/BenchCompWrapper.vue";
import { getOverview, getInDateAnalysis, getStockHealthAnalysis, getInOutCount, getInOutTypeCount } from "@/api/erc/signboard";
import { useRouter } from "vue-router";
import PieCharts from "./components/PieCharts.vue";
import leftBarCharts from "./components/leftBarCharts.vue";
import rightBarCharts from "./components/rightBarCharts.vue";
import inLeft from "@/assets/images/signboard/inLeft.png";
import outLeft from "@/assets/images/signboard/outLeft.png";
import inRight from "@/assets/images/signboard/inRight.png";
import outRight from "@/assets/images/signboard/outRight.png";
import num from "@/assets/images/signboard/num.png";
import alarmNum from "@/assets/images/signboard/alarmNum.png";
import left from "@/assets/images/signboard/left.png";
import right from "@/assets/images/signboard/right.png";
import { searchTreeMaterial } from "@/api/erc/material";

type DateType = "YEAR" | "MONTH" | "DAY";

const router = useRouter();
const rightBarRef = ref(null);
const typeCode = ref("0");
const treeData = ref([]);
const filteredTreeData = ref([]);
let type = ref<DateType>("YEAR");
//获取当天00:00:00时间
const startnow = () => {
  // 获取当日日期
  const startnow = new Date();
  // 设置时间为当天的 00:00:00
  const startOfDay = new Date(startnow.getFullYear(), startnow.getMonth(), startnow.getDate(), 0, 0, 0);
  // 获取年、月、日
  const startyear = startOfDay.getFullYear();
  const startmonth = String(startOfDay.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要 +1
  const startday = String(startOfDay.getDate()).padStart(2, "0"); // 补零
  // 获取时、分、秒（固定为 00:00:00）
  const starthours = String(startOfDay.getHours()).padStart(2, "0"); // 补零
  const startminutes = String(startOfDay.getMinutes()).padStart(2, "0"); // 补零
  const startseconds = String(startOfDay.getSeconds()).padStart(2, "0"); // 补零
  // 格式化为 YYYY-MM-DD HH:MM:SS
  return `${startyear}-${startmonth}-${startday} ${starthours}:${startminutes}:${startseconds}`;
};
// 获取当天23:59:59时间
const endnow = () => {
  // 获取当前日期
  const now = new Date();
  // 设置时间为当天的 23:59:59
  const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  // 获取年、月、日
  const year = endOfDay.getFullYear();
  const month = String(endOfDay.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要 +1
  const day = String(endOfDay.getDate()).padStart(2, "0"); // 补零
  // 获取时、分、秒（固定为 23:59:59）
  const hours = String(endOfDay.getHours()).padStart(2, "0"); // 补零
  const minutes = String(endOfDay.getMinutes()).padStart(2, "0"); // 补零
  const seconds = String(endOfDay.getSeconds()).padStart(2, "0"); // 补零
  // 格式化为 YYYY-MM-DD HH:MM:SS
  // const endformattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//获取本月一号00:00:00时间
const firstMonth = () => {
  // 1. 创建当前日期对象
  const date = new Date();
  // 2. 设置为当月第一天 00:00:00
  date.setDate(1);
  date.setHours(0, 0, 0, 0);
  // 3. 格式化输出
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份补零
  const day = String(date.getDate()).padStart(2, "0"); // 日期补零
  const time = "00:00:00";

  return `${year}-${month}-${day} ${time}`;
};
//获取过去365时间
const startTime = () => {
  // 1. 创建当前日期对象，并设置为当日 23:59:59
  const date = new Date();
  date.setDate(date.getDate() - 364);
  // 2. 设置时间为当天的 00:00:00
  date.setHours(0, 0, 0, 0);
  // 3. 格式化日期为 YYYY-MM-DD HH:mm:ss
  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需 +1
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  const result = formatDate(date);
  return result;
};
//获取现在时间
const endTime = () => {
  // 1. 创建当前日期对象，并设置为当日 23:59:59
  const date = new Date();
  date.setHours(23, 59, 59, 999);
  // 2. 按格式拼接年月日时分秒（自动补零）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需+1
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  // 3. 返回格式化字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//时间对比
const parseDate = dateStr => {
  const [datePart, timePart] = dateStr.split(" ");
  const [year, month, day] = datePart.split("-").map(Number);
  const [hours, minutes, seconds] = timePart.split(":").map(Number);
  return new Date(year, month - 1, day, hours, minutes, seconds);
};
const getYearDifference = (date1, date2) => {
  let yearDiff = date2.getFullYear() - date1.getFullYear();
  const month1 = date1.getMonth();
  const month2 = date2.getMonth();

  if (month2 < month1) {
    yearDiff--;
  } else if (month2 === month1) {
    const day1 = date1.getDate();
    const day2 = date2.getDate();
    if (day2 < day1) yearDiff--;
  }
  return yearDiff;
};

const getDateType = (): DateType => {
  const startDate: any = parseDate(queryParams.value.startDate);
  const endDate: any = parseDate(queryParams.value.endDate);

  // 计算毫秒差
  const diffMs = Math.abs(endDate - startDate);

  // 24小时内的判断
  if (diffMs < 86400000) return "DAY";

  // 计算完整年差
  const yearDiff = getYearDifference(startDate, endDate);
  if (yearDiff >= 1) return "YEAR";

  // 计算完整月差
  const monthDiff = endDate.getMonth() - startDate.getMonth() + (endDate.getFullYear() - startDate.getFullYear()) * 12;
  return monthDiff >= 1 ? "MONTH" : "DAY";
};

const state = reactive<any>({
  OverviewData: [],
  queryParams: {
    typeCode: "",
    dateType: "MONTH",
    startDate: startTime() || "",
    endDate: endTime() || "",
    inDate: [startTime(), endTime()]
  },
  inOutTypeCountData: {},
  chartsData: [],
  leftBarData: [],
  leftBarList: {},
  rightBarData: [],
  rightBarList: {}
  // typeCodeList: []
});
const { OverviewData, queryParams, inOutTypeCountData, chartsData, leftBarData, leftBarList, rightBarData, rightBarList } = toRefs(state);
// 进入页面时触发
onMounted(() => {
  getChartData();
  getOverviewData();
  startnow();
  endnow();
  firstMonth();
  startTime();
  endTime();
  queryTypeCodeList();
});
// 递归过滤叶子节点函数
const filterLeaves = nodes => {
  return nodes
    .filter(node => {
      // 如果有子节点且不是空数组，则保留
      if (node.children && node.children.length > 0) {
        // 递归处理子节点
        node.children = filterLeaves(node.children);
        return true;
      }
      // 没有子节点的是末级节点，过滤掉
      return false;
    })
    .map(node => {
      // 创建新对象避免修改原始数据
      return {
        ...node,
        // 如果没有子节点了，设置children为undefined
        children: node.children && node.children.length > 0 ? node.children : undefined
      };
    });
};
//获取物资类型列表
const queryTypeCodeList = async () => {
  try {
    const data: any = await searchTreeMaterial({
      name: ""
    });
    filteredTreeData.value = filterLeaves(data);
  } catch (err) {
    console.log(err);
  }
};
// 获取物资总览
const getOverviewData = async () => {
  OverviewData.value = await getOverview();
};
// 查询按钮
const getChartData = async () => {
  getPietData();
  getStockHealthAnalysisData();
  getInOutCountData();
  getInOutTypeCountData();
};
//入库时间分析
const getPietData = async () => {
  const params = queryParams.value;
  const res = await getInDateAnalysis(params);
  chartsData.value = res;
};
//库存健康分析
const getStockHealthAnalysisData = async () => {
  const params = queryParams.value;
  inOutTypeCountData.value = await getStockHealthAnalysis(params);
};

//出入库数量趋势
const getInOutCountData = async (dateType?: DateType) => {
  const params = queryParams.value;
  type.value = dateType || getDateType();
  const res: any = await getInOutCount({ ...params, dateType: type.value });
  leftBarList.value = res;
  leftBarData.value = [
    {
      name: "入库",
      type: "bar",
      // barMinHeight: 5, // 关键配置：最小柱高（单位px）
      data: res.inCount,
      barMaxWidth: 20 // 条形最大宽度
    },
    {
      name: "出库",
      type: "bar",
      // barMinHeight: 5, // 关键配置：最小柱高（单位px）
      data: res.outCount,
      barMaxWidth: 20 // 条形最大宽度
    }
  ];
};
//出入库种类分析
const getInOutTypeCountData = async (typeCode?) => {
  const params = {
    ...queryParams.value,
    typeCode: queryParams.value.typeCode || typeCode
  };
  const res: any = await getInOutTypeCount(params);
  if (res?.typeNameValue?.length > 0) {
    rightBarList.value = res;
    rightBarData.value = [
      {
        name: "入库",
        type: "bar",
        data: res.inCount.reverse(),
        // barMinHeight: 5, // 关键配置：最小柱高（单位px）
        barMaxWidth: 20 // 条形最大宽度
      },
      {
        name: "出库",
        type: "bar",
        data: res.outCount.reverse(),
        // barMinHeight: 5, // 关键配置：最小柱高（单位px）
        barMaxWidth: 20 // 条形最大宽度
      }
    ];
  }
};

//跳转入库
const linkToIn = value => {
  if (value === "day") {
    router.push({
      path: "/erc/material/in",
      query: {
        approveStatus: "pass",
        time: [startnow(), endnow()]
      }
    });
  } else if (value === "month") {
    router.push({
      path: "/erc/material/in",
      query: {
        approveStatus: "pass",
        time: [firstMonth(), endnow()]
      }
    });
  } else if (value === 6) {
    router.push({
      path: "/erc/material/in",
      query: {
        approveStatus: "pass",
        buyTime: 6
      }
    });
  } else if (value === 2) {
    router.push({
      path: "/erc/material/in",
      query: {
        approveStatus: "pass",
        buyTime: 2
      }
    });
  } else if (value === "in") {
    router.push({
      path: "/erc/material/in",
      query: {
        approveStatus: "pass"
      }
    });
  }
};
//跳转出库
const linkToOut = value => {
  if (value === "day") {
    router.push({
      path: "/erc/material/out",
      query: {
        approveStatus: "pass",
        time: [startnow(), endnow()]
      }
    });
  } else if (value === "month") {
    router.push({
      path: "/erc/material/out",
      query: {
        approveStatus: "pass",
        time: [firstMonth(), endnow()]
      }
    });
  }
};
//跳转台账
const linkToLedger = value => {
  if (value === "count") {
    router.push({
      path: "/erc/material/ledger"
    });
  } else if (value === "alarm") {
    router.push({
      path: "/erc/material/ledger",
      query: {
        warningStatus: 2
      }
    });
  } else if (value === "charts") {
    router.push({
      path: "/erc/material/ledger"
    });
  }
};
//返回上一级左侧
const linkGoLeft = () => {
  let newType: DateType = "YEAR";
  if (type.value === "DAY") {
    newType = "MONTH";
  } else if (type.value === "MONTH") {
    newType = "YEAR";
  } else {
    return;
  }
  getInOutCountData(newType);
};
//返回上一级右侧
const linkGoRight = () => {
  const segments = typeCode.value.split("/");
  segments.pop();
  typeCode.value = segments.join("/");
  getInOutTypeCountData(typeCode.value);
};
// 获取开始日期及结束日期
const changeDate = val => {
  console.log(val);

  // 检查结束时间是否为00:00:00
  const endDateStr = val[1];
  if (endDateStr.endsWith("00:00:00")) {
    // 将结束时间调整为当天的23:59:59
    const adjustedEndDate = endDateStr.replace("00:00:00", "23:59:59");
    // 更新日期范围
    queryParams.value.startDate = val[0];
    queryParams.value.endDate = adjustedEndDate;
    queryParams.value.inDate = [val[0], adjustedEndDate];
    // dateRange.value = [dates[0], adjustedEndDate];
  }
};
// 重置按钮
const resetTable = async () => {
  queryParams.value.name = "";
  queryParams.value.typeCode = "";
  queryParams.value.specification = "";
  typeCode.value = "0";
  queryParams.value.startDate = startTime() || "";
  queryParams.value.endDate = endTime() || "";
  queryParams.value.inDate = [startTime(), endTime()];
  getChartData();
};

//下钻
// 处理左侧下钻事件
const handleDrillLeft = item => {
  let newType: DateType = "YEAR";
  if (type.value === "YEAR") {
    newType = "MONTH";
  } else if (type.value === "MONTH") {
    newType = "DAY";
  } else {
    return;
  }
  getInOutCountData(newType);
};
// 处理右侧下钻事件
const handleDrillRight = item => {
  typeCode.value = item;
  getInOutTypeCountData(item);
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-flex-list.scss");
@import url("@/views/erc/scss/table-list.scss");

.equip-wrap-common {
  flex-direction: column;
  border-radius: 4px;
}
.banner {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 16px 0;
  background-color: #fff;
  border-radius: 8px;
  .banner-text {
    height: 14px;
  }
  .banner-button {
    margin-top: 6px;
    font-size: 24px;
    height: 24px;
    margin-bottom: 12px;
  }
  .inLeft {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }

  .outLeft {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }

  .inRight {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }
  .outRight {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }
  .num {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }
  .alarmNum {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }

    .title {
      p:first-child {
        font-size: 14px;
        color: rgb(0 0 0 / 80%);
      }

      p:nth-child(2) {
        font-size: 22px;
        font-weight: 500;
        color: rgb(0 0 0 / 90%);
      }
    }
  }
  .fontSize {
    width: 44px;
    height: 24px;
    font-size: 24px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 24px;
    cursor: pointer;
  }
  .fontSize:hover {
    color: #3b82f6;
  }

  .banner-test {
    width: 60px;
    height: 12px;
    font-size: 12px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 400;
    color: #909399;
    line-height: 12px;
  }
  .banner-icon {
    width: 31px;
    height: 12px;
    font-size: 12px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 400;
    line-height: 12px;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-right {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 300px;

  .card-right-item {
    text-align: center;
    .card-right-item-span {
      cursor: pointer;
    }
    .card-right-item-span:hover {
      color: #3b82f6;
    }
  }
}
:deep(.bench-comp) {
  margin-top: 16px;
  margin-bottom: 0px;
  padding: 0;
}
:deep(.px-card__body) {
  padding: 0px 20px 20px !important;
}
.serchBox {
  flex-direction: row;
  align-items: center;
}
.equip-wrap-common .equip-form {
  padding-top: 0px;
  margin-bottom: 0px;
  height: 33px;
  width: 100%;
}
:deep(.bench-comp-btn) {
  top: 0px;
  right: 0px;
}
.px-card {
  border: none !important;
}
.px-card.is-always-shadow {
  box-shadow: none !important;
}
</style>
